<%--
  Created by IntelliJ IDEA.
  User: super you
  Date: 2021/9/22
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <%-- 分页相关 --%>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/kkpager/jpager.js"></script>
    <link rel="stylesheet" type="text/css"
          href="<%=basePath%>static/js/kkpager/jpager.css">
    <script type="text/javascript" src="<%=basePath%>view/system/finance/listPage.js"></script>
    <script type="text/javascript">
        function load() {
            arrayPage(${pageResult.pages},${pageResult.total});
        }
    </script>
    <%--加入echarts--%>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body onload="load()">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 100%;height:60%;">
            <script>
                // import * as echarts from 'echarts';

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '流水'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['收入', '支出'],
                        textStyle: {
                            color: '#333'          // 图例文字颜色
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        name:'日期',
                        type: 'category',
                        data: [
                            <c:forEach items="${pageResult.dataList}" var="finance" >
                            '<fmt:formatDate value="${finance.financeDate}" pattern="yy年MM月dd日HH时mm分ss秒" />',
                            </c:forEach>
                        ]
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '收支',
                            min: 0,
                            max: 50,
                            interval: 10,
                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '收入',
                            type: 'bar',
                            data: [
                                <c:forEach items="${pageResult.dataList}" var="finance" >
                                    <c:if test="${finance.bill=='收入'}">
                                        '${finance.financePrice}',
                                    </c:if>
                                    <c:if test="${finance.bill!='收入'}">
                                        0,
                                    </c:if>
                                </c:forEach>
                            ]
                        },
                        {
                            name: '支出',
                            type: 'bar',
                            data: [
                                <c:forEach items="${pageResult.dataList}" var="finance" >
                                    <c:if test="${finance.bill=='支出'}">
                                        '${finance.financePrice}',
                                    </c:if>
                                    <c:if test="${finance.bill!='支出'}">
                                        0,
                                    </c:if>
                                </c:forEach>
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            </script>
        </div>
        <div id="main2" style="width: 50%;height: 20%">
            <script>
                var chartDom = document.getElementById('main2');
                var myChart = echarts.init(chartDom);
                var option;
                option={
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                {value:${incomeSum}, name:'总收入'},
                                {value:${expenditureSum}, name:'总支出'}
                            ]
                        }
                    ]
                }
                option && myChart.setOption(option);
            </script>
        </div>
    <center>
        <div id="jpager"></div>
    </center>
</body>
</html>
